import { useEffect, useState } from 'react'
import { getEmoji } from '@/api'

import './emoji.scss'


export default function Emoji () {
  const [imgs, setImgs] = useState<string[]>([])
  const [lazyLoadCount, setLazyLoadCount] = useState(50)

  useEffect(() => {
    getEmoji().then((res) => {
      setImgs(res)
    })
  }, [])

  useEffect(() => {
    function scrollFn () {
      const documentHeight = Math.max(
        document.body.scrollHeight,
        document.body.offsetHeight,
        document.documentElement.clientHeight,
        document.documentElement.scrollHeight,
        document.documentElement.offsetHeight
      );
      const windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
      const scrollPosition = window.scrollY || window.pageYOffset || document.documentElement.scrollTop;
      const threshold = 100
      if (documentHeight - (scrollPosition + windowHeight) < threshold) {
        console.log('已滚动到底部', lazyLoadCount);
        setLazyLoadCount(Math.max(lazyLoadCount + 50, imgs.length))
      }
    }
    window.addEventListener('scroll', scrollFn)
    return () => {
      window.removeEventListener('scroll', scrollFn)
    }
  }, [lazyLoadCount])

  return (
    <div className="emoji-page">
      {imgs.slice(0, lazyLoadCount).map(img => (
        <img key={img} className="img" src={'https://s1.hct.plus/' + img + '?imageMogr2/thumbnail/400x400'} />
      ))}
    </div>
  )
}
